<!--
  * 门店
  *
  * @Author:    -
  * @Date:      2025-03-21 08:31:36
  * @Copyright  -
-->
  
<template>
    <a-typography-paragraph>
        <div class="copy-type">
          <img :src="mtcyIcon"/>
          <img :src="elemecyIcon"/>
          <img :src="goIcon"/>
          <img :src="jdcyIcon"/>
          <a-typography-text mark>💎💎/店/月（无需激活，提交复制自动激活）</a-typography-text>
        </div>
    </a-typography-paragraph>
    <a-spin :spinning="loadOldShopData" tip="稍等片刻，我在拼命获取数据中..." size="large">
      <div style="margin: 10px;">
        <img :src="oldshopInfo.tp==='mtcy'?mtcyIcon:elemecyIcon" style="width: 38px;margin-bottom:2px;"/>
        <a-input placeholder="老店" v-model:value="oldshopInfo.showName" disabled size="large" style="width: 38%;"/>
        <img :src="jdcyIcon" style="width: 38px;margin-left: 20px;margin-right: 2px;margin-bottom:2px;"/>
        <a-select
          v-model:value="newShopInfo.id"
          :showSearch="true"
          placeholder="请输入京东餐饮门店ID,长度大于等于3"
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="false"
          not-found-content="找不到门店，请到门店管理列表核实！"
          :options="selectShopList"
          :field-names="{ label: 'shopName', value: 'id', options: 'children' }"
          @search="handleSearch"
          @change="handleChange"
          size="large" style="width: 38%;margin-right: 50px;"
        />
        <a-button type="primary" @click="getOldShopData">加载老店数据</a-button>
      </div>
      <div class="card-container">
        <a-tabs v-model:activeKey="activeKey" type="card">
          <a-tab-pane key="1" tab="①菜品复制">
            <a-row :gutter="[16,16]">
              <!-- <a-col :span="4">
                <a-button type="primary" @click="allCheckTag">全选/不选</a-button>
              </a-col> -->
              <a-col :span="4">
                <a-button>一键清空</a-button>
              </a-col>
              <a-col :span="4">
                <a-button @click="submitTask" type="primary">一键上传</a-button>
              </a-col>
              <a-col :span="4">
                <a-button>异常处理</a-button>
              </a-col>
              <a-col :span="8">
                <a-input-search
                  v-model:value="searchKey"
                  placeholder="输入菜品名称进行搜索"
                  size="large"
                  @search="onSearchShopItem"
                >
                  <template #enterButton>
                    <a-button type="primary">搜索</a-button>
                  </template>
                </a-input-search>
              </a-col>
            </a-row>
            <a-row :gutter="[10,10]" style="margin-top: 18px;">
              <a-col :span="6">
                <a-tree
                  :tree-data="shopTags"
                  :fieldNames="treeFields"
                  v-model:expandedKeys="expandedKeys"
                  v-model:selectedKeys="selectedKeys"
                  v-model:checkedKeys="checkedKeys"
                >
                <template #title="{ dataRef }">
                  <a-input v-model:value="dataRef.tagName" style="width: 180px;margin-right: 5px;margin-top: 8px;"/>({{ dataRef.productCount }})
                </template>
                </a-tree>
              </a-col>
              <a-col :span="18"> 
                <a-table :data-source="tableItems" :showHeader="false">
                  <template v-slot:emptyText>
                    <div style="text-align: center; padding: 100px 0;font-size: large;color: blue;">请先选择京东餐饮门店，并点击“加载老店数据”按钮获取数据</div>
                  </template>
                  <a-table-column key="name" title="商品信息" data-index="name"  :width="200">
                    <template #default="{ record }">
                      <a-row :gutter="[0,0]">
                        <a-col :span="3">
                          <a-image :src="record.picture" style="width: 80px;"/>
                        </a-col>
                        <a-col :span="3">
                          <a-select v-model:value="record.sellStatus" disabled>
                            <a-select-option :value="0">上架</a-select-option>
                            <a-select-option :value="1">下架</a-select-option>
                          </a-select>
                        </a-col>
                        <a-col :span="18">
                          <a-row>
                            <a-input v-model:value="record.name" allow-clear/>
                          </a-row>
                          <a-row>
                            <a-textarea v-model:value="record.description" placeholder="商品卖点" allow-clear/>
                          </a-row>
                        </a-col>
                      </a-row>
                      <a-row>
                        <a-col>
                          <a-table :data-source="record.skus" :pagination="false">
                            <a-table-column key="spec" title="销售属性" data-index="spec">
                              <template #default="{ record }">
                                <a-input v-model:value="record.spec"/>
                              </template>
                            </a-table-column>
                            <a-table-column key="price" title="原价" data-index="price">
                              <template #default="{ record }">
                                <a-input v-model:value="record.price"/>
                              </template>
                            </a-table-column>
                            <a-table-column key="actPrice" title="活动价" data-index="actPrice">
                              <template #default="{ record }">
                                <a-input v-model:value="record.actPrice"/>
                              </template>
                            </a-table-column>
                            <a-table-column key="stock" title="库存" data-index="stock">
                              <template #default="{ record }">
                                <a-input v-model:value="record.stock"/>
                              </template>
                            </a-table-column>
                            <a-table-column key="unit" title="重量" data-index="unit">
                              <template #default="{ record }">
                                <a-input v-model:value="record.unit"/>
                              </template>
                            </a-table-column>
                            <a-table-column key="boxPrice" title="打包费" data-index="boxPrice">
                              <template #default="{ record }">
                                <a-input v-model:value="record.boxPrice"/>
                              </template>
                            </a-table-column>
                          </a-table>
                        </a-col>
                        <a-row v-if="record.errorMsg!==undefined&&record.errorMsg!==null&&record.errorMsg!==''">
                          <a-col>
                            <span style="color:red;">异常信息：{{ record.errorMsg }}</span>
                          </a-col>
                        </a-row>
                        
                      </a-row>
                    </template>
                  </a-table-column>
                </a-table>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" tab="②复制进度">
            <p>Content of Tab Pane 2</p>
            <p>Content of Tab Pane 2</p>
            <p>Content of Tab Pane 2</p>
          </a-tab-pane>
          <a-tab-pane key="3" tab="③复制活动">
            <p>Content of Tab Pane 3</p>
            <p>Content of Tab Pane 3</p>
            <p>Content of Tab Pane 3</p>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-spin>
    
</template>
<script setup>
  defineOptions({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Shopcopy',
  })
  import { computed, onMounted,ref, watch } from 'vue';
  import { shopApi } from '/@/api/crawler/shop/shop-api';
  import _ from 'lodash';
  import { useRoute } from 'vue-router';
  import { localRead } from '/@/utils/local-util';
  import { message, Modal } from 'ant-design-vue';
  import mtcyIcon from '/@/assets/images/shop/mtcy.png';
  import elemecyIcon from '/@/assets/images/shop/elemecy.png';
  import jdcyIcon from '/@/assets/images/shop/jdcy.png';
  import goIcon from '/@/assets/images/shop/go.png';
  const route = useRoute();
  const loadOldShopData = ref(false);
  const newShopInfo = ref({});
  const selectShopList=ref([]);
  const oldshopInfo = ref([]);
  const expandedKeys = ref([]);
  const selectedKeys = ref([]);
  const checkedKeys = ref([]);
  const searchKey=ref('')
  const tableItems=ref([])
  const taskType=ref('runAll')
  const treeFields = ref({
    children: 'child',
    title: 'tagName',
    key:'tagId'
  })
  watch(expandedKeys, () => {
    console.log('expandedKeys', expandedKeys);
  });
  watch(selectedKeys, () => {
    console.log('selectedKeys', selectedKeys.value[0]);
    if(selectedKeys.value.length===0){
      tableItems.value=shopItems.value
    }else{
      tableItems.value=shopItems.value.filter(item=>item.tagId===selectedKeys.value[0])
    }
  });
  watch(checkedKeys, () => {
    //console.log('checkedKeys', checkedKeys);
  });
  const shopTags=ref([])
  const shopItems=ref([])
  onMounted(() => {
    oldshopInfo.value=route.query
    console.log('onMounted',oldshopInfo.value)
  })
  watch(
    () => route.query,
    (newQuery, oldQuery) => {
      oldshopInfo.value=route.query
      console.log('watch',oldshopInfo.value)
    }
  )
  const activeKey= ref('1')
  async function handleChange(value,options){
    //console.log('handleChange',value,options)
    newShopInfo.value=options
    //去获取复制记录
    //let responData=await shopApi.getOneCopyHis({})
  }
  async function handleSearch(value){
    console.log('handleSearch',value)
    if(value.length>=3){
      let responData=await shopApi.selectList({shopKey:value})
      selectShopList.value=responData.data
    }
  }
  async function getOldShopData() {
    if(newShopInfo.value.id===undefined){
      message.error('请选择京东外卖店铺！');
      return
    }
    loadOldShopData.value=true
    console.log('oldshopInfo',oldshopInfo.value,'newShopInfo',newShopInfo.value)
    let row=oldshopInfo.value
    let data={
        cookiestr:row.cookiestr,
        token: localRead('smart_admin_user_token'),
        apiurl: import.meta.env.VITE_APP_API_URL
    }
    window.electron.invoke(row.tp+'post',data).then(async (respon)=>{
        console.log('getShopData respon',respon,respon.errorMsg!==undefined&&respon.errorMsg!==null)
        if(respon.errorMsg===undefined||respon.errorMsg===null){
          shopTags.value=respon.shopTags
          shopItems.value=respon.shopItems
          tableItems.value=respon.shopItems
         // checkedKeys.value=respon.shopTags.map(tag=>tag.tagId)
        }else{
          message.error('获取数据失败，请重试！'+respon.errorMsg);
        }
        loadOldShopData.value=false
    }).catch(error=>{
        loadOldShopData.value=false
        message.error('处理数据失败，请重试！'+error);
    })  
  }
  function allCheckTag(){
    if(checkedKeys.value.length>0){
      checkedKeys.value=[]
    }else{
      checkedKeys.value=shopTags.value.map(tag=>tag.tagId)
    }
  }
  function onSearchShopItem(val){
    console.log('onSearchShopItem',val)
    if(val!==undefined&&val!==null&&val!==''){
      tableItems.value=shopItems.value.filter(item=>item.name.indexOf(val)>-1)
    }else{
      tableItems.value=shopItems.value
    }
  }
  async function submitTask(){
    await shopApi.submitTask({
      tid: newShopInfo.value.id,
      sid: oldshopInfo.value.id,
      tagStr:JSON.stringify(shopTags.value),
      shopItemStr:JSON.stringify(shopItems.value),
      taskType:taskType.value
    })
    message.success('提交成功！');
    activeKey.value=2
  }
</script>
<style scoped lang="less">
  @import './shopcopy-index.less';
</style>

